<template>
  <div class="header-bar">
    <a class="return-btn" @click="goBack"><i class="icon-return"></i></a>
    <span class="title"> {{ title }} </span>
  </div>
</template>
<script>
  export default{
    props: ['title'],
    methods: {
      goBack () {
        window.history.back()
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../assets/css/var.scss";
  .header-bar {
    position: relative;
    background: $topicColor;
    font-size: 18px;
    color: #fff;
    text-align: center;
    height: 44px;
    line-height: 44px;
    .return-btn {
      position: absolute;
      left: 0;
      display: flex;
      align-items: center;
      height: 44px;
      margin-left: 10px;
      font-size: 18px;
      color: #fff;
      .icon-return {
        display: inline-block;
        background: url(../assets/img/arrow_return.png);
        background-size: 24px auto;
        width: 24px;
        height: 24px;
      }
    }
    .title{
      font-size:18px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(255,255,255,1);

    }
  }
</style>
